<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h1>props的校验</h1>
    <child :count="10" name="zhangsan" :age="20" weight="200" size="small"></child>
  </div>

  <script src="../Vue.js"></script>

  <script>
    const { createApp } = Vue;

    /*
      String
      Number
      Boolean
      Array
      Object
      Date
      Function
      Symbol
      Error
    */ 
    const Child = {
      props: {
        name: String,
        // [Number, String]表示可以是数字也可以是字符串
        count: [Number, String], 
        age: {
          type: Number,
          // required: true 表示必填
          required: true
        },
        score: {
          type: Number,
          default: 100
        },
        // 自定义校验函数
        weight: {
          validator(value) {
            return value >= 70 && value <= 200
          }
        },
        size: {
          validator(value) {
            return ["large", "default", "small"].includes(value)
          }
        }
      },
      template: `
        <div>
          <div>这是子组件</div>
          <p>name: {{name}}</p>
          <p>count: {{count}}</p>
          <p>age: {{age}}</p>
          <p>score: {{score}}</p>
          <p>weight: {{weight}}</p>
          <p>size: {{size}}</p>
        </div>
      `
    }
    
    const app = createApp({
      data() {
        return {
          count: 10,
        }
      },
      methods: {},
      components: {
        Child
      }
    })

    app.mount("#app")
  </script>
</body>
</html>